c<template>
  <div id="goods">
    <div class="header2" ref="header">
      <div class="goback" @click="handleCancle"><i class="icon icon-left"></i></div>
      <div class="title">货物品类</div>
      <div class="actions"></div>
    </div>
    <div ref="contents" style="overflow-y: auto;-webkit-overflow-scrolling: touch;">
      <div class="itembox">
        <checker-box
          v-model="varietiesData"
          :url="url"
          name="货物品类"
          tagType="7"
          :serverid="serverid"
          @on-del="handleDelGoods"
          :load="load"
        ></checker-box>
        <div class="other" style="padding: 0rem 0.2rem 0.2rem 0.2rem;">
          <div class="remark vux-1px" style="margin-top: 0rem;">
            <x-input class="form-control" v-model="remark" placeholder="可填写货物品类或其他特殊情况，例如：易碎品小心轻放"></x-input>
          </div>
        </div>
      </div>

      <div v-if="type == 'kuaidibao'" class="itembox">
          <checker-box
            v-model="goodsTypeData"
            :url="goodTypeUrl"
            name="货物类型"
            tagType="8"
            :serverid="serverid"
            @on-del="handleDelGoods"
            :load="load"
          ></checker-box>
      </div>

      <div v-if="type == 'kuaidibao'" class="itembox">
        <checker-box
          v-model="goodsWeightData"
          :url="goodsWeightUrl"
          name="货物重量"
          :serverid="serverid"
          @on-del="handleDelGoods"
          :load="load"
        ></checker-box>
      </div>


      <div style="padding: 0.2rem;">
        <p class="noticemsg" v-if="type == 'xiaojiansudi'">
          温馨提示：<br />
          专人直取直送，3公里内约30分钟必达。<br />
          电单车载重≤10公斤，体积≤0.3方
        </p>
        <p class="noticemsg" v-if="type == 'kuaidibao'">
          温馨提示：<br />
          请在快递员上门取件时，在待取货订单中在线支付快递费，更有保障！
        </p>
      </div>
    </div>
    <div class="fiexd-btn vux-1px-t" ref="btn">
      <div class="flex-auto">
        <x-button type="primary" action-type="button" @click.native="handleSub">确认</x-button>
      </div>
    </div>


  </div>
</template>

<script>
  import { TransferDom } from 'vux'
  //import CheckerBox from './public/CheckerBox.vue'
  export default{
    name: 'goods',
    directives: {
      TransferDom
    },
    components: {
      CheckerBox: resolve => {require(['./public/CheckerBox.vue'], resolve)}
    },
    props: ['type', 'checkType', 'name', 'serverid', 'load'],
    data() {
      return {
        url: $config.host + '/api/tags/goods',
        goodTypeUrl: $config.host + '/api/tags/goodsType',
        goodsWeightUrl: $config.host + '/api/Tags/weight',
        varietiesData: {
          id: [],
          name: [],
          value: [],
          type: []
        },
        goodsTypeData: {
          id: [],
          name: [],
          value: [],
          type: []
        },
        goodsWeightData: {
          id: [],
          name: [],
          value: [],
          type: []
        },
        remark: ''
      }
    },
    mounted() {
      const bodyHeight = document.documentElement.clientHeight
      const headerHeight = this.$refs['header'].offsetHeight
      const btnHeight = this.$refs['btn'].offsetHeight
      const pensonHeight = bodyHeight - headerHeight - btnHeight
      this.$refs['contents'].style.height = pensonHeight + 'px'
    },
    methods: {
      handleCancle() {
        this.$emit('on-cancle')
      },
      handleSub() {
        if(!this.varietiesData.name.length) {
          this.$vux.toast.text('请选择货物品类', 'middle')
          return false
        }
        if(this.serverid == 5) {
          if(!this.goodsTypeData.id.length) {
            this.$vux.toast.text('请选择货物类型', 'middle')
            return false
          }
        }
        this.$emit('on-submit', this.varietiesData, this.goodsTypeData, this.remark, this.goodsWeightData)
      },
      handleDelGoods() {
        this.$emit('on-clear', this.varietiesData, this.goodsTypeData, this.remark, this.goodsWeightData)
      }
    }
  }
</script>
<style scoped>
  .fiexd-btn{
    height: 1.1rem;
    background: #f3f4f5;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:88;
    padding: 0.1rem 0.2rem;
  }
</style>
